<template>
	<view class="conter">
		<view class="cduck_box">加密鸭:{{ total }}只</view>
		<u-list height="1100rpx" @scrolltolower="scrolltolower">
			<view class="list_duck" v-if="collectionList.length != 0">
				<u-list-item v-for="(item, index) in collectionList" :key="index">
					<view class="min_ducklist">
						<view class="duck_image">
							<!-- 背景图 -->
							<image @click="goMonPurchase(item)" :src="imgUrl + item.name" mode="" class="imgsos">
							</image>
							<view class="number_duck">#{{ item.number }}</view>
						</view>
						<view class="duck_buttom">
							<view class="name_duck">
								<view class="name">￥{{ item.price ? item.price.toFixed(2) : '0.00' }}</view>
								<view class="num">繁育次数：{{ item.birthNumber }}/5</view>
							</view>
							<view class="price">
								<view>
									{{ item.isHunting == 0 ? '持有' : item.isHunting == 1 ? '交易中' : '上任中' }}
								</view>
							</view>
						</view>
					</view>
				</u-list-item>
			</view>
			<view v-if="collectionList.length == 0">
				<image style="
			width: 280rpx;
			height: 280rpx;
			margin: 270rpx 220rpx 0;
			 " src="../../static/images/fighting.gif" mode=""></image>
			</view>
		</u-list>
		<!-- 点击筛选 -->
		<view @click="show = true" >
			<image  class="image" :src="imgUrl + '/static/images/bulletbox.png'" mode=""></image>
		</view>
		<u-popup bgColor="transparent" :show="show" :round="45" mode="bottom" @close="close">
			<view class="close">
				<view class="closeone">筛选</view>
				<view class="closetow">
					<!-- 线条 -->
				</view>
				<!-- icon -->
				<u-icon @click="closePopup" class="closethree" color="#fff" size="18" bold name="close"></u-icon>
				<!-- 选项 -->
				<view class="Options">
					<text>全部状态</text>
					<view class="Optionsone">
						<view :class="{ active: activeIndex == index }" @click="getactive(item, index)"
							v-for="(item, index) in venList" :key="index">
							{{ item }}
						</view>
					</view>
				</view>
				<!--按钮 -->
				<view class="butonbox">
					<button @click="closePopup" class="buttonone">取消</button>
					<button class="buttontow" @click="confirm">确定</button>
				</view>
			</view>
		</u-popup>
		<!-- 点击筛选 -->
	</view>
</template>

<script>
	import {
		pagingQuery
	} from '@/api/venue/venue.js';
	import config from '@/config';
	export default {
		data() {
			return {
				collectionList: [], //所有数据
				venList: ['全部', '持有', '交易', '上任中'],
				activeIndex: 0,
				show: false,
				page: 1, //当前页码
				size: 10, //每页显示条数
				total: 0,
				imgUrl: config.gillUrl,
				imgUrl: config.imgUrl,
				name: '',
				isHunting: -1,
				birthNumber: -1,
				status: 'loadmore'
			};
		},
		created() {
			this.getpagingQuery();
		},
		watch: {
			$route: function(newRoute, oldRoute) {
				// 判断是否是底部导航切换触发的路由变化
				if (newRoute.path !== oldRoute.path) {
					this.collectionList = [];
					// 在这里执行你的逻辑
					this.getpagingQuery();
				}
			}
		},
		methods: {
			async getpagingQuery() {
				let param = {};
				param.page = this.page;
				param.size = this.size;
				param.raceName = this.name; //此处数据等待筛选逻辑完成之后再添加
				param.isHunting = this.isHunting; // -1代表全部，0代表持有 1代表交易中 2代表狩猎中
				param.birthNumber = this.birthNumber;
				param.mature = 1; //是否是蛋，0蛋，1萌宝，默认为1
				const data = await pagingQuery(param);
				let _this = this;
				data.data.res.map((i) => {
					_this.collectionList.push(i);
				});
				this.total = data.data.total;
				this.show = false;

			},
			confirm() {
				this.collectionList = [];
				this.getpagingQuery();
			},
			// list加载事件
			scrolltolower() {
				//加载时候判断是否还有下一页
				if (this.collectionList.length < this.total) {
					this.page++;
					//则还有下一页
					this.status = 'loadmore';
					this.getpagingQuery();
				} else {
					this.page = 1;
					this.status = 'nomore';
				}
			},
			getactive(e, index) {
				if (e === '持有') {
					this.isHunting = 0;
					this.activeIndex = 1;
				} else if (e === '交易') {
					this.isHunting = 1;
					this.activeIndex = 2;
				} else if (e === '上任中') {
					this.isHunting = 2;
					this.activeIndex = 3;
				} else {
					this.isHunting = -1;
					this.activeIndex = 0;
				}
			},
			// 藏馆mon详情
			goMonPurchase(item) {
				uni.navigateTo({
					url: `/pages/consignment/cangHouse?mature=${item.mature}&id=${item.id}` // 跳转到目标页面的路径
				});
			},
			close() {
				this.show = false;
			},
			//点击关闭弹框
			closePopup() {
				this.show = false;
			}
		}
	};
</script>

<style scoped lang="less">
	.conter {
		padding: 15rpx 34.88rpx;

		.cduck_box {
			width: 181rpx;
			height: 59rpx;
			box-sizing: border-box;
			background: #211f30;
			border-radius: 14rpx;
			text-align: center;
			line-height: 60rpx;
			border: 2rpx solid #3c424d;
			font-size: 24rpx;
			font-family: 'font';
			font-weight: 500;
			color: #ffffff;
		}

		// 底部列表
		.list_duck {
			width: 680rpx;
			display: flex;
			flex-wrap: wrap;
			justify-content: space-between;
			margin-top: 42.33rpx;

			.min_ducklist {
				width: 318rpx;
				height: 408rpx;
				margin-bottom: 45.35rpx;
				border-radius: 9rpx;
				box-shadow: 3rpx 3rpx 5rpx 0rpx rgba(0, 0, 0, 0.15);
			}

			.duck_image {
				position: relative;
				width: 316rpx;
				height: 316rpx;
				border-top: 1rpx solid #3c424d;
				border-left: 1rpx solid #3c424d;
				border-right: 1rpx solid #3c424d;
				border-radius: 9rpx 9rpx 0rpx 0rpx;

				image {
					width: 316rpx;
					height: 316rpx;
					background: #648bd8;
					border-radius: 9rpx 9rpx 0rpx 0rpx;
				}

				.lock {
					width: 316rpx;
					height: 316rpx;
					border-radius: 9rpx 9rpx 0rpx 0rpx;
					position: absolute;
					z-index: 100;
					left: 0;
				}
			}

			.number_duck {
				top: 17.44rpx;
				left: 17.44rpx;
				background: rgba(40, 44, 52, 0.8);
				border-radius: 17rpx;
				position: absolute;
				padding: 5rpx 10rpx 2rpx 10rpx;
				font-family: 'font';
				font-weight: 500;
				color: #46a6f8;
				font-size: 24rpx;
			}

			.duck_buttom {
				width: 316rpx;
				height: 110rpx;
				border-bottom: 1rpx solid #3c424d;
				border-left: 1rpx solid #3c424d;
				border-right: 1rpx solid #3c424d;
				background: #211f30;
				display: flex;
				justify-content: space-between;
				padding: 0 10rpx;
				border-radius: 0rpx 0rpx 9rpx 9rpx;

				.name_duck {
					.name {
						font-size: 24rpx;
						font-family: 'font';
						font-weight: 500;
						color: #ffffff;
						margin: 18rpx 0 0 15rpx;
					}

					.num {
						font-size: 20rpx;
						font-family: 'font';
						font-weight: 500;
						color: #8a92a3;
						margin: 15rpx 0 5rpx 17rpx;
					}
				}

				.price {
					display: flex;
					height: 39rpx;
					color: #ffffff;
					font-size: 24rpx;
					font-weight: 500;
					margin-top: 55rpx;
					margin-right: 17rpx;
					font-family: 'font';
					align-items: center;
					border-radius: 8rpx;
					padding: 0 10rpx 0 10rpx;
					background-color: #46a6f8;
				}
			}
		}

		// 底部列表

		// 筛选
		.image {
			top:30rpx;
			width: 31rpx;
			height: 29rpx;
			right: 40.88rpx;
			z-index: 9999;
			position: absolute;
		}

		//弹框大盒子
		.close {
			width: 750rpx;
			height: 507.56rpx;
			background: #1c1f25;
			border-radius: 17rpx 17rpx 0rpx 0rpx;
			border: 3rpx solid #282c34;
			position: relative;

			.closeone {
				//筛选
				font-size: 31rpx;
				font-family: 'font';
				font-weight: 400;
				color: #ffffff;
				text-align: center;
				margin: 38.37rpx 0;
			}

			.closetow {
				//线条
				width: 694rpx;
				height: 1rpx;
				background: #282c34;
				margin: auto;
			}

			.closethree {
				position: absolute;
				right: 38.37rpx;
				top: 48.37rpx;
			}

			.Options {
				margin: 34.88rpx 30rpx;

				text {
					font-size: 26rpx;
					font-family: 'font';
					font-weight: 400;
					color: #8e97a8;
				}

				.Optionsone .active {
					background: #46a6f8;
					color: #fff;
				}

				.Optionsone {
					display: flex;
					flex-wrap: wrap;
					justify-content: space-between;
					margin: 25rpx 0;
					font-size: 26rpx;
					font-family: 'font';
					font-weight: 400;
					color: #3c424d;

					view {
						width: 130rpx;
						height: 61rpx;
						background: #0d0e12;
						border-radius: 16rpx 16rpx 16rpx 16rpx;
						text-align: center;
						line-height: 63rpx;
						margin-bottom: 50rpx;
					}
				}
			}

			//按钮
			.butonbox {
				display: flex;
				margin-top: 50rpx;

				.buttonone {
					width: 209rpx;
					height: 77rpx;
					background: #0d0e12;
					box-shadow: 3rpx 3rpx 5rpx 0rpx rgba(0, 0, 0, 0.15);
					border-radius: 14rpx 14rpx 14rpx 14rpx;
					opacity: 1;
					border: 2rpx solid #3c424d;
					font-size: 28rpx;
					font-family: 'font';
					font-weight: 400;
					color: #3c424d;
					line-height: 77rpx;
				}

				.buttontow {
					width: 436rpx;
					height: 77rpx;
					background: linear-gradient(270deg, #4463ff 0%, #3addeb 100%);
					box-shadow: 3rpx 3rpx 5rpx 0rpx rgba(0, 0, 0, 0.15);
					border-radius: 14rpx 14rpx 14rpx 14rpx;
					opacity: 1;
					font-size: 28rpx;
					font-family: 'font';
					font-weight: 400;
					color: #ffffff;
					line-height: 77rpx;
				}
			}
		}

		// 弹框大盒子
		// 筛选
	}
</style>